{% extends '_base.html' %}

{% block style %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/login.css') }}">
<style>
    header {
        height: 100vh;
    }

    body {
        background-image: url({{ url_for('static', filename='img/c.jpg')}});
    }
</style>
{% endblock %}

{% block title %}
Login {{ url_for('static', filename='') }}
{% endblock %}

{% block header_content %}
<div class="container-flex">
    <div class="login-box">
        <form {# action="{{ url_for('views.admin') }}"   #} method="POST" autocomplete="off">
            <div class="input-item">
                <div class="label">邮箱</div>
                <input class="input" type="text" name="email" autocomplete="off">
            </div>
            <div class="input-item">
                <div class="label">密码</div>
                <input class="input password" type="password" name="">
                <input hidden type="password" id="hpwd" name="password">
            </div>
            <div class="input-item">
                <input class="submit" type="button" value="登录">
            </div>
            <div class="fn">
                <a href="./index">返回首页</a> -
                <a href="./forget_password">忘记密码</a>
            </div>
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}" />
        </form>
    </div>
</div>
{% endblock %}

{% block js %}
<script src="{{url_for('static', filename='js/md5.js')}}"></script>
<script>
    let form = document.querySelector('.login-box form')
    let body = document.body
    form.addEventListener('mouseover', function () {
        body.classList.add('filter')
    })

    form.addEventListener('mouseout', function () {
        body.classList.remove('filter')
    })

    let submit = document.querySelector('form .submit')
    submit.addEventListener('click', function (e) {
        let password = document.querySelector('form .password')
        let hpwd = document.querySelector('#hpwd')
        hpwd.value = hex_md5(password.value)
        form.submit()
    })
</script>
{% endblock %}

{% block main %}
{% endblock %}